<template>
<el-container>
  <el-header>
    <projectQuery :form="form" @query="getProjectYsActions"></projectQuery>
  </el-header>
  <el-main style="margin-top: 40px;">
    <el-table
    :data="projectYs.list"
    tooltip-effect="dark"
    style="width: 100%;"
    >
      <el-table-column label="ID" prop="id" width="60px"></el-table-column>
      <el-table-column label="项目名称" prop="name"></el-table-column>
      <el-table-column label="预算金额" prop="offer"></el-table-column>
      <el-table-column label="总计" prop="total"></el-table-column>
      <el-table-column label="利润金额" prop="profit"></el-table-column>
      <el-table-column label="利润率(%)" prop="percent"></el-table-column>
      <el-table-column label="负责人" prop="leader"></el-table-column>
      <el-table-column label="创建时间" prop="created_at"></el-table-column>

      <el-table-column label="操作">
        <template slot-scope="scope">
          <div class="frow fcenter" style="align-items: flex-end;">
            <div v-if="!form.status">
              <el-badge is-dot class="item" >
              <el-button type="primary" size="mini" @click="editProjectYs(scope.row)">编辑</el-button>
              </el-badge>
            </div>
              <div v-else><el-button type="primary" size="mini" @click="editProjectYs(scope.row)" >编辑</el-button></div>
              <div style="margin-left: 10px;"><el-button type="danger" size="mini" @click="delProjectYs(scope.row)">删除</el-button></div>
          </div>
        </template>
      </el-table-column>

    </el-table>
  </el-main>
  <el-footer style="margin-top: 40px">
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="form.page"
      :page-sizes="[10, 20, 30, 40]"
      :page-size="form.page_size"
      layout="total, sizes, prev, pager, next, jumper"
      :total="projectYs.total">
    </el-pagination>
  </el-footer>
</el-container>
</template>

<script>
  import projectQuery from "./project_query";
  import {mapActions,mapState} from 'vuex'
  import {delProject} from '@/apilist/Project'
    export default {
        name: "project_list_ys",
        components:{projectQuery},
        data(){
            return {
                form: {
                    name: '',
                    create_user: '',
                    status: 0,
                    date: '',
                    batch_id: '',
                    page: 1,
                    page_size: 10,
                    type: 1,
                },
                list: [],
                total: 0,
            }
        },

        computed:{
            ...mapState('ProjectData',['projectYs']),
        },
        methods:{
          ...mapActions('ProjectData',['getProjectYsActions']),
            //编辑预算
            editProjectYs(row){
                this.$router.push({
                    path: '/project_ys/edit',
                    query:{id: row.id},
                })
            },
            //删除预算
            delProjectYs(row){

              this.$confirm('是否删除预算?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
              }).then(() => {
                delProject({id: row.id, type: 'ys'}).then(res => {
                  if(res.state == 'ok') {
                    this.$message(
                      {type: 'success',
                        message: res.msg,
                        onClose: ()=>{
                          this.getProjectYsActions(this.form)
                        }
                      }
                    )
                  }
                })
              }).catch(() => {
                this.$message({
                  type: 'info',
                  message: '已取消删除'
                });
              });
            },
            handleSizeChange(val){
                this.form.page_size = val
                this.getProjectYsActions(this.form)
            },
            handleCurrentChange(val){
                this.form.page= val
                this.getProjectYsActions(this.form)
            }
        },

    }
</script>

<style scoped>
.item{margin-top: 4px;}
</style>
